<!--
首页组件
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
          <img style="height:460px;" :src="$target + item.imgPath" :alt="item.describes" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->
    <div class="main-box">
      <div class="main">
        <!-- 漫画商品展示区域 -->
        <div class="comic" id="promo-menu">
          <div class="box-hd">
            <div class="title">Mango漫画</div>
            <div class="more" id="more">
              <!-- <MyMenu :val="2" @fromChild="getChildMsg">
                <span slot="1">热门</span>
                <span slot="2">漫画</span>
              </MyMenu> -->
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'public/imgs/comics/comics-promo1.jpg'" />
                </li>
                <li>
                  <img :src="$target +'public/imgs/comics/comics-promo2.jpg'" />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="comicList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 漫画商品展示区域END -->


      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      carousel: "", // 轮播图数据
      comicList:""
    };
  },
  watch: {

  },
  created() {
    // 获取轮播图数据
    this.$axios
      .post("/api/resources/carousel", {})
      .then(res => {
        this.carousel = res.data.carousel;
      })
      .catch(err => {
        return Promise.reject(err);
      });
    // 获取各类商品数据

    this.getPromo("漫画","comicList");

  },
  methods: {
    // 获取各类商品数据方法封装
    getPromo(categoryName, val, api) {
      api = api != undefined ? api : "/api/product/getPromoProduct";
      this.$axios
        .post(api, {
          categoryName
        })
        .then(res => {
          this[val] = res.data.Product;
        })
        .catch(err => {
          return Promise.reject(err);
        });
    }
  }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>
